<template>
	<view>
		<hchPosition :storeData="storeData" :markers="markers"></hchPosition>
		<scroll-view class="margin-top">
			<view class="cu-list menu-avatar">
				<view class="cu-item cu-card" v-for="(item, index) in busniseList" :key="index" @click="navToDetailPage(item)">
					<view class="cu-avatar radius lg" :style="'background-image:url(' + item.avatar + ')'"></view>
					<view class="content">
						<view>
							<view class="text-cut">{{item.name}}</view>
						</view>
						<view class="text-gray text-sm flex">
							<text class="text-red padding-xs">6km</text>
							<text class="text-cut padding-xs"> {{item.address}}</text>
						</view>
					</view>
					<view>
						<button class="cu-btn round bg-red sm" style="margin-right: 20px;">下单</button>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import businessman from '../../api/businessman.js'
	import hchPosition from "../../components/hch-position/hch-position.vue"
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				busniseList: [],
				storeData: [ //门店信息展示  id name address tel 必填
					{
						id: 1,
						name: '门店XXXXX1号',
						address: '厦门市思明区汇景商业广场XXX1号',
						tel: '12345678900',
					}, {
						id: 2,
						name: '门店XXXXX2号',
						address: '厦门市思明区汇景商业广场XXX2号',
						tel: '12345678900',
					},
				],
				markers: [ //门店在地图上的标记 以下字段必填 
					{
						id: 1,
						latitude: 31.688978,
						longitude: 119.973038,
						iconPath: '../../static/门店.png',
						callout: {
							content: "门店XXXXX1号店",
							borderRadius: 10,
							padding: 10,
							display: "ALWAYS",
						}
					}, {
						id: 2,
						latitude: 31.688993,
						longitude: 119.969337,
						iconPath: '../../static/门店.png',
						callout: {
							content: "门店XXXXX2号店",
							borderRadius: 10,
							padding: 10,
							display: "ALWAYS",
						}
					}
				]
			}
		},
		components: {
			hchPosition
		},
		methods: {
			...mapMutations(['selectBusiness']),
			getbuslist() {
				uni.showLoading({
					title:'加载中...'
				})
				businessman.getList({
					success: res => {
						this.busniseList = res.data.list
						uni.hideLoading()
					},
					fail: err => {
						uni.hideLoading()
						uni.showToast({
							title: '获取商家列表失败',
							duration: 1500
						})
					}
				});
			},
			//点餐
			navToDetailPage(item) {
				const loginData = {
					'id': item.id,
					'address': item.address,
					'name': item.name
				}
				this.selectBusiness(loginData)
				uni.removeStorageSync('desktop')
				uni.reLaunch({
					url: '../category/category'
				})
				uni.switchTab({
					url: `/pages/category/category`
				})
			}
		},
		created() {
			this.getbuslist();
		}
	}
</script>

<style lang="scss">

</style>
